<div class="box box-skin main-content">	
	<div class="box-body no-padding">
	    <div id="toolbar">
			<div class="form-inline" role="form">
		    	<div class="form-group btn-group">
                    <button type="button" class="btn btn-default btn-flat" onclick="CRUDCardFunc(1);" title="添加"><i class="fa fa-plus"></i></button>
                    <button type="button" class="btn btn-default btn-flat" onclick="CRUDCardFunc(5);" title="批量删除"><i class="fa fa-trash"></i></button>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" name="likeMap[owner_name]" placeholder="持卡人姓名">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" name="likeMap[no]" placeholder="会员卡号">
                </div>
		    	<div class="form-group btn-group">
                	<button type="button" class="btn btn-default btn-flat" onclick="searchFunc()" title="搜索"><i class="fa fa-search"></i></button>
                	<button type="button" class="btn btn-default btn-flat" onclick="reloadFunc();" title="重新加载"><i class="fa fa-refresh"></i></button>
				</div>
            </div>
	    </div>
		
		<table id="table"></table>
	</div>
</div>

<script type="text/javascript" src="__TMPL__Public/pages/card/card.js"></script>
<script type="text/javascript">
$(function() {
	$('#table').bootstrapTable({
		classes: 'table table-no-bordered table-hover',
		striped: true,
		toolbar: '#toolbar',
		showColumns: true,
	    showPaginationSwitch: true,
	    pagination: true,
		sidePagination: 'server',
		pageSize: 15,
		pageList: '[10, 15, 50, 100, All]',
		queryParams: queryParams,
		queryParamsType: 'limit',
		sortName: 'id',
		sortOrder: 'desc',
		url: "{:U('Card/Card/dataList')}",
	    idField: 'id',
	    columns: [{
            field: 'state',
            checkbox: true,
            visible: false,
//			width: '20%',
            align: 'left',
            valign: 'middle',
        }, {
	        title: 'ID',
	        field: 'id',
	        sortable: true,
            visible: false,
//			width: '20%',
            align: 'left',
            valign: 'middle',
	    }, {
	        title: '会员卡号',
	        field: 'no',
	        sortable: true,
//			width: '20%',
            align: 'left',
            valign: 'middle',
	    }, {
	        title: '持卡人',
	        field: 'owner_name',
	        sortable: true,
//			width: '20%',
            align: 'left',
            valign: 'middle',
	    }, {
	        title: '小名',
	        field: 'owner_nickname',
//			width: '20%',
            align: 'left',
            valign: 'middle',
            formatter: function(value, row, index) {
            	return value != '' && value != null ? value : '<span class="text-gray">无</span>';
    		},
	    }, {
	        title: '持卡人性别',
	        field: 'owner_sex',
//			width: '20%',
            align: 'left',
            valign: 'middle',
            formatter: function(value, row, index) {
            	if (value == 01) {
            		return '<span class="text-aqua">男</span>';
            	} else if (value == 2) {
            		return '<span class="text-red">女</span>';
            	} else {
            		return '<span class="text-muted">保密</span>';
            	}
            },
	    }, {
	        title: '手机',
	        field: 'owner_tel',
//			width: '20%',
            align: 'left',
            valign: 'middle',
	    }, {
	        title: '会员卡等级',
	        field: 'lv',
//			width: '20%',
            align: 'left',
            valign: 'middle',
			formatter: function(value, row, index) {
            	/* var lvName = [ "限制会员", "普通会员", "高级会员", "金牌会员", "钻石会员" ];
            	return value != '' && value != null ? lvName[value - 1] : '<span class="text-gray">无</span>'; */
            	
            	var str = '';
            	switch (parseInt(value)) {
				case 1:
					str = '<span class="text-muted">限制会员</span>';
					break;
				case 2:
					str = '<span class="text-red">普通会员</span>';
					break;
				case 3:
					str = '<span class="text-green">高级会员</span>';
					break;
				case 4:
					str = '<span class="text-aqua">金牌会员</span>';
					break;
				case 5:
					str = '<span class="text-light-blue">钻石会员</span>';
					break;
				default:
					str = '<span class="text-gray">非会员</span>';
					break;
				}
            	return str;
			},
	    }, {
	        title: 'VIP有效期',
	        field: 'expiry_time',
	        sortable: true,
//			width: '20%',
            align: 'left',
            valign: 'middle',
            formatter: function(value, row, index) {
            	if (value > '1000-01-01 00:00:00') {
            		return '<span class="text-blue">' + value + '</span>';
            	} else {
            		return '<span class="text-gray">' + value + '</span>';
            	}
    		},
	    }, {
	        title: '可绑数量',
	        field: 'max_bind_count',
	        sortable: true,
//			width: '20%',
            align: 'left',
            valign: 'middle',
	    }, {
	        title: '当前绑定',
	        field: 'cur_bind_count',
	        sortable: true,
//			width: '20%',
            align: 'left',
            valign: 'middle',
	    }, {
	        title: '可借数量',
	        field: 'max_borrow_count',
	        sortable: true,
//			width: '20%',
            align: 'left',
            valign: 'middle',
	    }, {
	        title: '当前借阅',
	        field: 'cur_borrow_count',
	        sortable: true,
//			width: '20%',
            align: 'left',
            valign: 'middle',
	    }, {
            title: '操作',
            field: 'operate',
//			width: '20%',
            align: 'left',
            valign: 'middle',
            formatter: function(value, row, index) {
				var str = '';
				str += '<div class="btn-group">';
				str += '<button type="button" class="btn btn-default btn-flat btn-xs" onclick="CRUDCardFunc(2, ' + row.id + ');">查看</button>';
				str += '<button type="button" class="btn btn-default btn-flat btn-xs" onclick="CRUDCardFunc(3, ' + row.id + ', ' + index + ');">编辑</button>';
				str += '<button type="button" class="btn btn-default btn-flat btn-xs" onclick="CRUDCardFunc(4, ' + row.id + ');">删除</button>';
				str += '</div>';
				return str;
			},
        }],
	});
});

/* search */
function queryParams(params) {
    $('#toolbar').find('input[name], select[name]').each(function () {
        params[$(this).attr('name')] = $(this).val();
    });
    return params;
}

function searchFunc() {
	$('#table').bootstrapTable('selectPage', 1);			// IMPORTANT!!!  有刷新功能!!!
}

/* reload */
function reloadFunc() {
	$('#toolbar').resetForm();
	$('#table').bootstrapTable('selectPage', 1);
}
</script>
